<template>
  <div class="box" v-show="getFinishAll">
   <div class="box-left">
     <input type="checkbox" :checked="isAll" @click="allChecked">
     <span>已完成{{getFinishItem}} / 全部 {{getFinishAll}}</span>
   </div>
    <div class="box-right">
      <button class="del" @click="deleteTodo">清除已完成的任务</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    //全选按钮
    allChecked(e){

       this.dataList.forEach(item =>{
           //e.target.checked获取当前按钮是否被选中
           //把全选按钮赋值给每个item.done
           item.done = e.target.checked
       })
    },
    deleteTodo(){
      //接收父组件传过来的函数并执行
      this.deleteAllTodo()
    }
  },
  computed:{
     //总的完成个数
     getFinishAll(){
        return this.dataList.length
     },
     //计数已完成的的个数
     getFinishItem(){
       return this.dataList.reduce((pre,current)=>pre + (current.done ? 1: 0),0)
     },
     //判断单个的个数和总完成的个数 返回一个布尔值刚好对应是否选中
     isAll(){
        return this.getFinishAll === this.getFinishItem && this.getFinishAll > 0
     }
  },
  props:['dataList','deleteAllTodo']
}
</script>

<style scoped>
.box{
  padding: 7px 0 7px 7px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.del{
  background-color: #E65B46FF;
  color: #fff;
  font-size: 12px;
  border: 0;
  padding: 7px;
  border-radius: 3px;
}
span{
  margin-left: 10px;
}
</style>
